/* 
  目标： 优缺点以及使用场景
  优点: React自带的跨组件通信方案
  缺点: 会增加组件嵌套结构, 调试困难
  场景:
    1. 一键换色
    2. 多语言
*/

import React, { Component } from 'react';

const { Provider, Consumer } = React.createContext();
const { Provider: Provider2, Consumer: Consumer2 } = React.createContext();

export default class App extends Component {
  state = {
    list: [1, 2, 3],
  };

  render() {
    return (
      <div>
        <h1>父组件</h1>
        <Provider
          // 2. 使用Provider传数据
          value={this.state.list}
        >
          <Son></Son>
        </Provider>
      </div>
    );
  }
}

class Son extends Component {
  render() {
    return (
      <div>
        <h2> 儿子</h2>
        <Provider2 value={<h1>来自Son的关爱</h1>}>
          <SonSon></SonSon>
        </Provider2>
      </div>
    );
  }
}

class SonSon extends Component {
  render() {
    return (
      <div>
        <h2> 孙子</h2>
        {/* 3. Consumer组件接收一个函数, 函数的形参就是接收到的数据 */}
        <Consumer>
          {(data) => {
            return <h3>{data}</h3>;
          }}
        </Consumer>
        <SonSonSon></SonSonSon>
      </div>
    );
  }
}

class SonSonSon extends React.Component {
  render() {
    return (
      <div>
        SonSonSon
        <Consumer2>
          {(value) => {
            return value;
          }}
        </Consumer2>
      </div>
    );
  }
}

// 1. Context优点: React自带不需要下载额外的包
// 2. 缺点: 增加组件嵌套结构, 难以调试
// 3. 场景: 1. 一键换色 2.国际化
